{% extends 'partial/layout.njk' %}

{% block body %}
  <header class='demos-header'>
    <a href="/">
      <h1 class="demos-title">学生主页列表</h1>
    </a>
  </header>

  <div class="weui-btn-area">
    {# <a id="toggle-all" class="weui-btn weui-btn_default" value="">显示已删除学生</a> #}
    <input
      type="button"
      class="weui-btn weui-btn_default"
      value="显示已删除学生"
      id="toggle-all">
  </div>
  <div class="bd">
    <div class="page__bd">
      {% set orgPrev = memberTree[0].orgId %}

      {% for member in memberTree %}

        {% if loop.first %}
          <div class="weui-cells__title" style="margin-left: {{ 12*member._levelNo }}px">
            {{ member._orgName }}
            ({{ member._count }}人)
          </div>
          <div class="weui-cells">
          {% endif %}

          {% if member.orgId != orgPrev %}
            {% set orgPrev = member.orgId %}
          </div>
          <div class="weui-cells__title" style="margin-left: {{ 12*member._levelNo }}px">
            {{ member._orgName }}
            ({{ member._count }}人)
          </div>
          <div class="weui-cells">
          {% endif %}

          <a
            class="weui-cell weui-cell_access {% if member.joinState != 1 %} delete-member {% endif %}"
            style="margin-left: {{ 12*member._levelNo }}px;
   {% if member.joinState != 1 %} display:none {% endif %}"
            href="/page/taskAssign">
            <div class="weui-cell__bd">
              <p>{{ member.netName}}
                {{ member.position }}</p>
            </div>
            <div class="weui-cell__ft">
              {% if member.isAdmin %}
                管理员
              {% endif %}
            </div>
             <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_text">
            <p class="weui-media-box__desc">显示每个人的当前任务。</p>
          </div>

          </a>

          {% if loop.last %}
          </div>
        {% endif %}

      {% endfor %}

    </div>
  </div>
{% endblock %}

{% block script %}

  <style>
    .delete-member {
      color: #f76260;
    }
  </style>
  <script>
    $(document).ready(function () {
      $('#toggle-all').on('click', function (event) {
        $('.delete-member').fadeToggle();

        var button = $(event.target);
        if (button.val() == '显示已删除学生') {
          button.val('隐藏已删除学生');
        } else {
          button.val('显示已删除学生');
        }
      });
    });
  </script>

{% endblock %}